<template>
  <div class="imageViewer">
    <el-main>
      <div v-if="showToolBar" class="tool-bar">
        <!-- 开始裁剪 -->
        <el-tooltip class="box-item" effect="dark" content="开始裁剪" placement="top-start">
          <el-button class="zoomOutBtn" type="primary" @click="start" circle>
            <i class="iconfont icon-shubiaoyidong-anse"></i>
          </el-button>
        </el-tooltip>
        <!-- 裁剪 -->
        <el-tooltip class="box-item" effect="dark" content="裁剪" placement="top-start">
          <el-button class="zoomOutBtn" type="primary" @click="trimClick" circle>
            <i class="iconfont icon-caijian"></i>
          </el-button>
        </el-tooltip>
        <!-- 左旋转 -->
        <el-tooltip class="box-item" effect="dark" content="左旋转" placement="top-start">
          <el-button class="zoomOutBtn" type="primary" @click="rotateLeft" circle>
            <i class="iconfont icon-zuoshunshizhenxuanzhuan"></i>
          </el-button>
        </el-tooltip>
        <!-- 右旋转 -->
        <el-tooltip class="box-item" effect="dark" content="右旋转" placement="top-start">
          <el-button class="zoomOutBtn" type="primary" @click="rotateRight" circle>
            <i class="iconfont icon-youshunshizhenxuanzhuan"></i>
          </el-button>
        </el-tooltip>
        <!-- 原图放大 -->
        <el-tooltip class="box-item" effect="dark" content="放大" placement="top-start">
          <el-button class="zoomInBtn" type="primary" :icon="ZoomIn" @click="changeScale(1)" circle />
        </el-tooltip>
        <!-- 原图缩小 -->
        <el-tooltip class="box-item" effect="dark" content="缩小" placement="top-start">
          <el-button class="zoomInBtn" type="primary" :icon="ZoomOut" @click="changeScale(-1)" circle />
        </el-tooltip>
        <!-- 重置 -->
        <el-tooltip class="box-item" effect="dark" content="重置" placement="top-start">
          <el-button class="zoomInBtn" type="primary" :icon="Refresh" @click="reset()" circle />
        </el-tooltip>
      </div>
      <VueCropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.outputSize"
        :outputType="option.outputType"
        :info="option.info"
        :canScale="option.canScale"
        :autoCrop="option.autoCrop"
        :fixed="option.fixed"
        :fixedNumber="option.fixedNumber"
        :full="option.full"
        :fixedBox="option.fixedBox"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :original="option.original"
        :centerBox="option.centerBox"
        :infoTrue="option.infoTrue"
        :maxImgSize="option.maxImgSize"
        :enlarge="option.enlarge"
        :mode="option.mode"
        @realTime="realTime"
      ></VueCropper>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, computed, nextTick } from "vue";
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
import { ZoomIn, ZoomOut, Refresh } from "@element-plus/icons-vue";

const props = defineProps({
  curNodeImgUrl: {
    type: String,
    default: ""
  },
  showToolBar: {
    type: Boolean,
    default: true
  }
});

const emits = defineEmits(["imgCroped"]);

// 获取点击的el元素
const el = ref();
// 图片配置
const option = reactive({
  img: "", //裁剪图片的地址
  outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
  outputType: "jpeg", //裁剪生成图片的格式（jpeg || png || webp）
  info: true, //图片大小信息
  canScale: true, //图片是否允许滚轮缩放
  autoCrop: false, //是否默认生成截图框
  fixed: false, //是否开启截图框宽高固定比例
  fixedNumber: [1.53, 1], //截图框的宽高比例
  full: false, //false按原比例裁切图片，不失真
  fixedBox: false, //固定截图框大小，不允许改变
  canMove: true, //上传图片是否可以移动
  canMoveBox: true, //截图框能否拖动
  original: false, //上传图片按照原始比例渲染
  centerBox: false, //截图框是否被限制在图片里面
  infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高
  maxImgSize: 3000, //限制图片最大宽度和高度
  enlarge: 1, //图片根据截图框输出比例倍数
  mode: "contain" //图片默认渲染方式
});
// 预览裁切图片
const previews = reactive({
  url: "",
  img: ""
});
// 获取实例
const cropper = ref();

watch(
  () => props.curNodeImgUrl,
  (val: string) => {
    option.img = val;
  }
);

//实时预览函数
const realTime = () => {
  getBase64(el?.value);
};
// 获取截图
const getBase64 = (val?: any) => {
  val?.getCropBlob((data: any) => {
    previews.url = window.URL.createObjectURL(new Blob([data], { type: "application/zip" }));
  });
};
// 点击开始
const start = (e: any) => {
  cropper.value.startCrop();
};
// 点击裁剪
const trimClick = () => {
  cropper.value.getCropData((data: string) => {
    previews.url = data;
    emits("imgCroped", data);
  });
};
// 放大/缩小
const changeScale = (num: number) => {
  num = num || 1;
  cropper.value.changeScale(num);
};
// 左转
const rotateLeft = () => {
  cropper.value.rotateLeft();
};
// 右转
const rotateRight = () => {
  cropper.value.rotateRight();
};
// 重置
const reset = () => {
  cropper.value.refresh();
};
// 清除框选 (去掉所有)
const clear = () => {
  cropper.value.refresh();
};

defineExpose({
  start,
  trimClick,
  changeScale,
  rotateLeft,
  rotateRight,
  reset
});
</script>

<style scoped lang="scss">
.imageViewer {
  display: flex;
  width: 100%;
  height: 100%;
  .el-main {
    position: relative;
    height: 100%;
    padding: 5px;
    background-color: #efefef;
    border: 1px solid #cccccc;
    .tool-bar {
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 9;
      .icon-shubiaoyidong-anse {
        font-size: 14px;
      }
      .icon-caijian {
        font-size: 15px;
      }
      .icon-zuoshunshizhenxuanzhuan,
      .icon-youshunshizhenxuanzhuan {
        font-size: 14px;
      }
    }
  }
}
</style>
